<template>
    <div class="HomeSelling">
        <div class="HomeSelling-1">
            <div class="HomeSelling-top">
                <router-link to="/hyperBox">
                    <div class="HomeSelling-top-left">
                        <div class="HomeSelling-top-left-time">
                            <h2>超合算</h2>
                            <van-count-down :time="time" >
                                <template #default="timeData">
                                    <span class="block">{{ timeData.hours }}</span>
                                    <span class="colon">:</span>
                                    <span class="block">{{ timeData.minutes }}</span>
                                    <span class="colon">:</span>
                                    <span class="block">{{ timeData.seconds }}</span>
                                </template>
                            </van-count-down>
                        </div>
                    <span style="color:#999;">小龙虾89元3斤></span><br/>
                    <van-tag round type="primary" color="#97c83f" text-color="#fff" style="margin:.07rem 0 .12rem">GO<van-icon name="arrow"/></van-tag>
                </div>
                </router-link>
                <router-link to="/hyperBox">
                    <div class="HomeSelling-top-right">
                        <img src="/image/Home/4.jpg" alt="">
                        <img src="/image/Home/9.jpg" alt="">
                    </div>
                </router-link>
            </div>
            <div class="HomeSelling-bot">
                <div class="HomeSelling-bot-con">
                    <h2>耍大牌</h2>
                    <span>夏日好货 买一送一</span>
                    <div>
                        <img src="/image/Home/4.jpg" alt="">
                        <img src="/image/Home/9.jpg" alt="">
                    </div>
                </div>

                <div class="HomeSelling-bot-con">
                    <router-link to="/hotList">
                        <h2>西安热卖榜</h2>
                        <span>24小时热卖好物</span>
                        <div>
                            <img src="/image/Home/11.jpg" alt="">
                            <img src="/image/Home/11.jpg" alt="">
                        </div>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "HomeSelling",
    data() {
        return {
            time: 30 * 60 * 60 * 1000
        }
    },
    methods:{

    }
}
</script>

<style scoped>
.HomeSelling-top-left-time{
    display: flex;
    padding-bottom: .06rem;
}
.HomeSelling-top-left-time h2{
    margin-right: .08rem;
    color: #333;
}
.HomeSelling-top{
    display: flex;
    justify-content: space-between;
    padding-top: .12rem;
    padding-left: .16rem;
    padding-right: .13rem;
}
.HomeSelling-top-right{
    display: flex;
}
.HomeSelling-top-right img:nth-child(2){
    margin-left: .20rem;
}
.colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
}
.block {
    display: inline-block;
    width: 22px;
    color: #fff !important;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
    border-radius: 2px;

}
.HomeSelling-bot-con{
    width: 50%;
    padding-top: .12rem;
    padding-left: .16rem;
    padding-right: .13rem;
    background-color: #fefefe;
}
.HomeSelling-bot-con div{
    padding-top: .14rem;
    padding-bottom: .12rem;
    display: flex;
    justify-content: space-between;
}
.HomeSelling-bot-con h2{
    padding-bottom: .06rem;
    color: #333;
}
.HomeSelling-bot-con span{
    color: #999;
}
.HomeSelling-1{
    margin:0 .12rem;
    height:2.48rem;
    border-radius: .06rem;
    background-color: #fff;
}
.HomeSelling-1 img{
    width: .70rem;
    height: .70rem;
    object-fit: cover;
}
.HomeSelling-bot{
    display: flex;
    justify-content: space-between;
}
</style>